<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  .dota2{
    width: 800px;
    height: 800px;
    background-repeat: no-repeat;
  }
  .tt{
    border: 3px solid #29cc2d;
  }
  .yy{
    border: 3px solid #cc3729;
  }
</style>
<body>
<div class="">
  <img id="hero_tt_1" class="tt" src="https://hoppinzq.oss-cn-hangzhou.aliyuncs.com/game/dota2/gif/npc_dota_hero_beastmaster.gif" style="border-radius: 50%;width: 100px;height: 100px;position: absolute;top: 480px;left: 50px">
  <img id="hero_tt_2" class="tt" src="https://hoppinzq.oss-cn-hangzhou.aliyuncs.com/game/dota2/gif/npc_dota_hero_keeper_of_the_light.gif" style="border-radius: 50%;width: 100px;height: 100px;position: absolute;top: 480px;left: 160px">
  <img id="hero_tt_3" class="tt" src="https://hoppinzq.oss-cn-hangzhou.aliyuncs.com/game/dota2/gif/npc_dota_hero_void_spirit.gif" style="border-radius: 50%;width: 100px;height: 100px;position: absolute;top: 480px;left: 270px">
  <img id="hero_tt_4" class="tt" src="https://hoppinzq.oss-cn-hangzhou.aliyuncs.com/game/dota2/gif/npc_dota_hero_enchantress.gif" style="border-radius: 50%;width: 100px;height: 100px;position: absolute;top: 590px;left: 270px">
  <img id="hero_tt_5" class="tt" src="https://hoppinzq.oss-cn-hangzhou.aliyuncs.com/game/dota2/gif/npc_dota_hero_morphling.gif" style="border-radius: 50%;width: 100px;height: 100px;position: absolute;top: 700px;left: 270px">

  <img id="hero_yy_1" class="yy" src="https://hoppinzq.oss-cn-hangzhou.aliyuncs.com/game/dota2/gif/npc_dota_hero_juggernaut.gif" style="border-radius: 50%;width: 100px;height: 100px;position: absolute;top: 30px;left: 640px">
  <img id="hero_yy_2" class="yy" src="https://hoppinzq.oss-cn-hangzhou.aliyuncs.com/game/dota2/gif/npc_dota_hero_ogre_magi.gif" style="border-radius: 50%;width: 100px;height: 100px;position: absolute;top: 140px;left: 640px">
  <img id="hero_yy_3" class="yy" src="https://hoppinzq.oss-cn-hangzhou.aliyuncs.com/game/dota2/gif/npc_dota_hero_puck.gif" style="border-radius: 50%;width: 100px;height: 100px;position: absolute;top: 250px;left: 640px">
  <img id="hero_yy_4" class="yy" src="https://hoppinzq.oss-cn-hangzhou.aliyuncs.com/game/dota2/gif/npc_dota_hero_phoenix.gif" style="border-radius: 50%;width: 100px;height: 100px;position: absolute;top: 250px;left: 750px">
  <img id="hero_yy_5" class="yy" src="https://hoppinzq.oss-cn-hangzhou.aliyuncs.com/game/dota2/gif/npc_dota_hero_mars.gif" style="border-radius: 50%;width: 100px;height: 100px;position: absolute;top: 250px;left: 860px">
</div>
<script src="jquery-3.3.1.js"></script>
<script src="anime.min.js"></script>

<script>
  $(function () {
    anime({
      targets: '#hero_tt_1',
      translateY: -370,
      duration: 3300,
      easing: 'easeOutExpo',
      delay: 1000
    });
    anime({
      targets: '#hero_tt_2',
      translateX: function(el) {
        return -110;
      },
      translateY: function(el, i) {
        return -260;
      },
      duration: 3800,
      delay: 1100,
      easing: 'easeOutExpo',
      direction: 'alternate',
      loop: false
    });
    anime({
      targets: '#hero_yy_1',
      translateY: 0,
      translateX: -480,
      easing: 'easeOutExpo',
      duration: 3000,
      delay: 1000
    });
    anime({
      targets: '#hero_yy_2',
      translateY: -110,
      translateX: -370,
      easing: 'easeOutExpo',
      duration: 3200,
      delay: 1100
    });
    anime({
      targets: '#hero_tt_3',
      translateX: function(el) {
        return 120;
      },
      translateY: function(el, i) {
        return -80;
      },
      duration: 2000,
      delay: 1000,
      direction: 'alternate',
      loop: false
    });
    anime({
      targets: '#hero_yy_3',
      translateX: function(el) {
        return -160;
      },
      translateY: function(el, i) {
        return 80;
      },
      duration: 2000,
      delay: 1000,
      direction: 'alternate',
      loop: false
    });
    anime({
      targets: '#hero_tt_4',
      translateX: 260,
      translateY: 110,
      duration: 3200,
      easing: 'easeOutExpo',
      delay: 1100
    });
    anime({
      targets: '#hero_tt_5',
      translateX: 370,
      duration: 3000,
      easing: 'easeOutExpo',
      delay: 1000
    });
    anime({
      targets: '#hero_yy_4',
      translateY: 250,
      duration: 3200,
      easing: 'easeOutExpo',
      delay: 1000
    });
    anime({
      targets: '#hero_yy_5',
      translateX: function(el) {
        return -110;
      },
      translateY: function(el, i) {
        return 360;
      },
      duration: 2500,
      easing: 'easeOutExpo',
      delay: 1000,
      direction: 'alternate',
      loop: false
    });
  })
</script>
</body>
</html>